<template>
	<view class="department">
		<view class="header">
			<image src="/static/images/index/gs.png" mode=""></image>
			<view class="title">
				<view class="name">{{ departMsg.deptName }}</view>
				<view class="focus">
					<view class="">共{{ departMsg.user || 0 }}人 |</view>
					<view class="noFocus">
						<view>{{ departMsg.userSubscribe || 0 }}人未开启通知提醒</view>
                        <view class="noticeBtn" @click="toTips">
                        <image src="/static/images/index/q.png" mode=""></image>
                        </view>
					
					</view>
				</view>
			</view>
		</view>
		<!-- 这里是组的接口 -->
		<view class="bookList">
			<view class="bookList_item header" v-for="(item, index) in departList" :key="index" @click="toDepart(item)" :style="{borderBottom:index==departList.length-1?'none':'2rpx solid #eeeeee'}">
				<image src="/static/images/index/gs.png" alt=""></image>
				<view class="title">
					<view class="name">{{ item.deptName }}</view>
					<view class="focus">
						<view class="">共{{ item.user }}人 |</view>
						<view class="">{{ item.userSubscribe }}人未开启通知提醒</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 这里是人的接口 -->
		<view class="person">
			<view class="bookList">
					
				<user-card :user-list="userList"></user-card>
				
			</view>
		</view>
		
	</view>
</template>

<script>
import UserCard from './components/user_card.vue';
import { addressLsit, userAddress } from '@/apis/index.js';
export default {
	components: {
		UserCard
	},
	data() {
		return {
			// title:'',
			// deptId:'',
			// list:[{name:'东区租'},{name:'南区组'},{name:'西区租'},{name:'北区租'}],
			departMsg: {},
			// 人的集合
			userList: [], 
			// 组的集合
			departList: [], 
			totalUser: 0,
			totalUserSubscribe: 0
		};
	},
	onLoad(e) {
		let data = JSON.parse(e.data);
		this.departMsg = data;
		uni.setNavigationBarTitle({
			title: data.deptName
		});
		this.getUserList();
	},
	onShow() {
		this.getUserList();
	},
	methods: {
		getUserList() {
			uni.showLoading({
				title: '加载中',
				icon: 'none'
			});
			Promise.all([addressLsit({ deptId: this.departMsg.id }), userAddress({ deptId: this.departMsg.id })]).then(res => {
				if (res) {
					uni.hideLoading();
					console.log(res, 'all');
					this.departList = res[0].data;
					this.userList = res[1].data;
				}
				this.totalUser = this.userList.reduce((sumData, key) => {
					return sumData + key.user;
				}, 0);
				this.totalUserSubscribe = this.userList.reduce((sumData, key) => {
					return sumData + key.userSubscribe;
				}, 0);
			});
		},
		toDepart({ id, deptName, userSubscribe, user }) {
			const data = {
				id,
				deptName,
				userSubscribe,
				user
			};
			uni.navigateTo({
				url: '/subpages/addressBook/department?data=' + JSON.stringify(data)
			});
		},
		// 跳转公众号链接
		toTips() {
			uni.navigateTo({
				url:'/subpages/index/components/indexWebView?url=' + 'https://mp.weixin.qq.com/s/Q3eCZGi6y9pv5z21TIcVhg'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.department {
	min-height: 100vh;
	background: #f3f6f8;
	.header {
		display: flex;
		background-color: #fff;
		padding: 30rpx 48rpx 20rpx 48rpx;
		image {
			width: 64rpx;
			height: 64rpx;
			margin-right: 14rpx;
		}

		.title {
			display: flex;
			flex-direction: column;
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
		}
		.focus {
			display: flex;
			font-size: 24rpx;
			color: #999;
			font-weight: normal;
			
			view:nth-child(2) {
				padding-left: 10rpx;
			}
			.noFocus {
				display: flex;
				align-items: center;
				// border-left: 1rpx solid #999999;
				image {
					width: 28rpx;
					height: 28rpx;
				}
				.noticeBtn{
					display: flex;
					width: 100rpx;
				}
			}
		}
	}
	.person{
		padding-bottom: 100rpx;
	}
	.bookList {
		margin: 0 16rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		.bookList_item {
			padding: 28rpx 0rpx;
			border-bottom: 2rpx solid #eeeeee;
			// justify-content: space-between;
			align-items: center;
			.name {
				font-size: 28rpx;
				margin-bottom: 4rpx;
				text {
					font-size: 22rpx;
					color: #666;
					background-color: #e9e9e9;
					border-radius: 8rpx;
					padding: 6rpx 12rpx;
					margin-left: 20rpx;
					font-weight: normal;
				}
				.active {
					color: #0091ff;
					background: #dcf0ff;
				}
			}
		}
		.left {
			width: 600rpx;
			display: flex;
			image{
				border-radius: 50%;
			}
		}
		.right {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			image {
				width: 48rpx;
				height: 48rpx;
				margin: 0;
			}
			font-size: 24rpx;
			color: #0091ff;
		}
	}
}
</style>
